<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="标题">
        <el-input v-model="keyword" placeholder="请输入关键字..."></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fuzzyQuery">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <vxe-table
      highlight-hover-column
      highlight-current-row
      show-header
      border
      resizable
      show-footer
      height="550"
      :data="tableData">
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column :sortable="true" type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column title="标题" show-overflow="tooltip" field="title" width="240"></vxe-table-column>
      <vxe-table-column title="栏目" show-overflow="tooltip" field="typename" width="100"></vxe-table-column>
      <vxe-table-column title="分区" show-overflow="tooltip" field="waytype" width="100"></vxe-table-column>
      <vxe-table-column show-overflow="tooltip" title="上传人" field="uploadadmin" width="100"></vxe-table-column>
      <vxe-table-column :sortable="true" show-overflow="tooltip" title="访问量" field="visited" width="90"></vxe-table-column>
      <vxe-table-column :sortable="true" show-overflow="tooltip" title="点赞数" field="praise" width="90"></vxe-table-column>
      <vxe-table-column :sortable="true" show-overflow="tooltip" title="收藏数" field="like" width="90"></vxe-table-column>
      <!--      图片-->
      <vxe-table-column width="70" :resizable="false" show-overflow>
        <template v-slot:header>
          <div class="first-col">
            <div class="first-col-bottom">图片</div>
          </div>
        </template>
        <template v-slot="{ row }">
          <div class="img">
            <img :src="row.url">
          </div>
        </template>
      </vxe-table-column>
      <!--      操作栏-->
      <vxe-table-column width="150" :resizable="false" show-overflow>
        <template v-slot:header>
          <div class="first-col">
            <div class="first-col-bottom">操作栏</div>
          </div>
        </template>
        <template v-slot="{ row }">
          <div class="operate">
            <vxe-button size="mini" status="primary" content="编辑" @click="edit(row.bid)"></vxe-button>
            <vxe-button size="mini" status="danger" content="删除" @click="del(row.bid)"></vxe-button>
          </div>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!--  分页-->
    <vxe-pager
      background
      :current-page.sync="page"
      :page-size.sync="limit"
      :total="total"
      auto-hidden
      align="center"
      @page-change="pageChange"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
    </vxe-pager>
  </div>
</template>

<script>
  export default {
    name: 'articleList',
    data() {
      return {
        limit: 10,
        page: 1,
        total:0,
        loading: false,
        tableData: [],
        keyword:'',
      }
    },
    mounted() {
      this.getBlogList(this.page,this.limit)
    },
    methods: {
      //获取文章列表
      async getBlogList(page,limit,keyword='') {
        console.log(page,limit)
        this.loading = true
        const res = await this.$http('/admin/getBlogList', {
          'page': page,
          'limit':limit,
          'keyword':keyword
        })
        console.log(res, 'res')
        if (res.code == 1) {
          this.tableData = res.data.data
          this.total = res.data.count
          this.loading = false
        }else{
          this.$message.error(res.info)
        }
      },
      //编辑文章
      edit(bid){
        console.log(bid,'bid')
        this.$router.push({
          path:'/article/editArticle',
          query:{
            bid
          }
        })
      },
      //删除文章
      async del(bid){
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http('/admin/deleteBlog',{
            'bid':bid
          }).then(res=>{
             if(res.code==1){
               this.$message.success(res.info)
               this.getBlogList()
             }else{
               this.$message.error(res.info)
             }
           })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //分页
      pageChange({currentPage, pageSize}){
        this.getBlogList(currentPage,pageSize)
      },
      //模糊查询
      fuzzyQuery(){
        this.page = 1
        this.getBlogList(this.page,this.limit,this.keyword)
      },
      //重置
      reset(){
        this.page = 1
        this.keyword=''
        this.getBlogList(this.page,this.limit,this.keyword)
      }
    }
  }
</script>

<style scoped lang="scss">
  .img{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    >img{
      height: 45px;
      width: 45px;
    }
    .operate{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
